<!DOCTYPE html>
<html>
<head>
    <title>带表格的 Accordion</title>
    <script src="https://cdn.webix.com/edge/webix.js"></script>
    <link rel="stylesheet" href="https://cdn.webix.com/edge/webix.css">
</head>
<body>
<div id="main" style="width: 500px; height: 400px;"></div>

<script>
    webix.ready(function() {
        webix.ui({
            container: "main",
            view: "accordion",
            rows: [
                {
                    header: "基本信息",
                    body: "点击下方表格项查看详细信息"
                },
                {
                    header: "数据表格",
                    body: {
                        view: "datatable",
                        columns: [
                            { id: "id", header: "ID", width: 50 },
                            { id: "name", header: "姓名", fillspace: true },
                            { id: "age", header: "年龄", width: 80 }
                        ],
                        data: [
                            { id: 1, name: "张三", age: 28 },
                            { id: 2, name: "李四", age: 35 },
                            { id: 3, name: "王五", age: 42 }
                        ],
                        autoheight: true,
                        scroll: false
                    }
                },
                {
                    header: "操作记录",
                    body: {
                        view: "list",
                        template: "#date# #action#",
                        data: [
                            { id: 1, date: "2024-03-01", action: "创建订单" },
                            { id: 2, date: "2024-03-02", action: "修改配置" }
                        ]
                    }
                }
            ]
        });
    });
</script>
</body>
</html>
